<template>
  <div class="page-container-padding">
    <div class="remain">
      <span>当前剩余积分：</span>
      <span class="num">{{ remainQuota }}</span>
    </div>
    <div>
      <el-table border stripe :data="quotaDetailData">
        <el-table-column
          label="时间"
          prop="create_time"
          width="170"
        ></el-table-column>
        <el-table-column
          label="模块"
          prop="module_name"
          width="170"
        ></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column
          label="变化值"
          prop="quota_change"
          align="right"
          width="200"
        ></el-table-column>
        <el-table-column
          label="剩余"
          prop="quota_remain"
          align="right"
          width="200"
        ></el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        style="margin-top: 5px"
        background
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import { QueryMyQuotaDetail } from '@/api/prodService/quota'
  export default {
    data() {
      return {
        remainQuota: '',
        quotaDetailData: [],
        page: 1,
        pageSize: 30,
        totalCount: 0,
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        QueryMyQuotaDetail(this.page, this.pageSize).then((res) => {
          // console.log(res)
          const data = res.data
          this.quotaDetailData = data.quota
          this.remainQuota = data.current_quota
          this.totalCount = data.total_count
        })
      },
      currentPageChanged(page) {
        this.page = page
        this.getData()
      },
    },
  }
</script>
<style scoped lang="scss">
  .remain {
    font-size: 16px;
    margin-bottom: 10px;
    .num {
      color: #f74603;
      font-weight: 700;
    }
  }
</style>
